import deepClone from "@/libs/deepClone";
import { Table } from 'ant-design-vue';
import { ref, computed, reactive, toRefs } from "vue";

type RowKeys = (string | number)[]
export interface SelectedRowOption {
  selections?: { key: string, text: string, onSelect: (data: RowKeys) => RowKeys }[];
}

export function useTableSelectedRow(option?: SelectedRowOption) {

  const selectedRowKeys = ref<RowKeys>([]); // Check here to configure the default column

  const onSelectChange = (changableRowKeys: RowKeys, a: any) => {
    console.log('selectedRowKeys changed: ', changableRowKeys, a);
    selectedRowKeys.value = changableRowKeys;
  };

  const rowSelection = computed(() => {
    let selections: { key: string, text?: string, onSelect: (data: RowKeys) => void }[] = []
    if (option && option.selections) {
      option.selections.forEach((item, idx) => {
        selections.push(deepClone(item))
        selections[idx].onSelect = (data: RowKeys) => {
          let returnData = item.onSelect(data)
          selectedRowKeys.value = returnData || data
        }
      })
    }

    return {
      selectedRowKeys,
      onChange: onSelectChange,
      hideDefaultSelections: true,
      hideSelectAll: false,
      fixed: true,
      selections: [
        Table.SELECTION_INVERT,
        Table.SELECTION_NONE,
        ...selections
      ],
    };
  });

  return {
    rowSelection,
    selectedRowKeys,
  }
}

/**
 * 分页
 * 
 * @param option 初始化配置
 * @returns 
 */
export function useTablePaging(option?: Paging) {

  let state = reactive(Object.assign({
    page: 1,
    size: 20,
    tableTotal: 0
  }, option))

  function changePage(page: number) {
    state.page = page
  }

  function changeSize(size: number) {
    state.size = size
  }

  function changeTableTotal(total: number) {
    state.tableTotal = total
  }

  function getPagination(paginationOption?: {
    size?: 'small' | 'large'
    position?: 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight'
    showTotal?: (total: number) => string
    getTableData?: Function
  }) {
    return {
      position: paginationOption?.position || 'bottom',
      current: state.page,
      pageSize: state.size,
      size: paginationOption?.size || 'small',
      total: state.tableTotal,
      showTotal: paginationOption?.showTotal || ((total: number) => `共 ${total} 条`),
      onChange: (page: number, size: number) => {
        changePage(page)
        changeSize(size)
        paginationOption?.getTableData?.()
      }
    }
  }

  return {
    ...toRefs(state),
    changePage,
    changeSize,
    changeTableTotal,
    getPagination
  }
}

/**
 * 表格加载状态
 * 
 * @returns {
 *    startLoading: 开启加载
 *    closeLoading: 关闭加载
 *    loading:      加载状态
 * }
 */
export function useTableLoading() {

  let loading = ref(false)

  const startLoading = () => {
    loading.value = true
  }

  const closeLoading = () => {
    loading.value = false
  }

  return {
    startLoading,
    closeLoading,
    loading
  }
}

